import { List, Button, WingBlank, Toast, InputItem } from 'antd-mobile';
import { Component } from 'react'
import { RECORD_TYPE, RECORD_TIME_TYPE} from '@/config/dict'
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment'
import StandardForm from '@/components/standardForm'
import styles from './index.less'
@connect(({ manager, loading }) => {
  return {
    manager,
  }
})
class CreateRecord extends Component {
  constructor(props) {
    super(props)
    this.setWorkTime = this.setWorkTime.bind(this)
    this.createRecord = this.createRecord.bind(this)
    this.workTimeValidator = this.workTimeValidator.bind(this)
  }
  state = {
    workTime: 1
  }
  instantForm = null
  renderWorkTimeExtra() {
    return <div>
    <div onClick={() => this.setWorkTime(0.5)} style={{marginRight: '5px'}} className={+this.state.workTime === 0.5 ? 'am-tag am-tag-active' : 'am-tag am-tag-normal'}>
      <div>半天</div>
    </div>
    <div onClick={() => this.setWorkTime(1)} style={{marginRight: '5px'}} className={+this.state.workTime === 1 ? 'am-tag am-tag-active' : 'am-tag am-tag-normal'}>
      <div>一天</div>
    </div>
  </div>
  }
  setWorkTime(time) {
    this.setState({
      workTime: +time
    })
    this.instantForm.setFieldsValue({workTime: time})
  }
  createRecord() {
    const { dispatch, location: {query} } = this.props
    this.instantForm.validateFields((err, values) => {
      if(err) return
      Toast.loading('提交中...')
      values.userId = query.id
      values.workTime = +values.workTime
      values.type = values.type[0]
      values.timeType = values.timeType[0]
      dispatch({
        type: 'manager/createRecord',
        payload: values
      }).then(res => {
        Toast.hide()
        Toast.success('记录成功')
        setTimeout(() => {
          router.go(-1)
        }, 1500)
      }).catch(() => {
        Toast.hide()
      })
    })
  }
  renderFrom() {
    const 
    formItems= [
      {
        type: 'Picker',
        name: 'type',
        label: '记录类型',
        data: RECORD_TYPE,
        layoutOption: {
          cols: 1
        },
        options: {
          rules: [{required: true}],
          initialValue: [10]
        }
      },
      {
        type: 'Picker',
        name: 'timeType',
        label: '工时类型',
        data: RECORD_TIME_TYPE,
        layoutOption: {
          cols: 1
        },
        options: {
          rules: [{required: true}],
          initialValue: [10]
        }
      },
      {
        name: 'workTime',
        label: '工时(天)',
        placeholder: '请输入工时',
        layoutOption: {
          type: 'digit',
          className: 'customClass',
          extra: this.renderWorkTimeExtra()
        },
        options: {
          initialValue: 1,
          rules: [
            {required: true, type: 'number', transform:(value) => +value},
            {validator: this.workTimeValidator}
          ]
        }
      },
      {
        type: 'TextareaItem',
        name: 'remark',
        label: '备注',
        placeholder: '请输入备注',
        layoutOption: {
          rows: 6
        },
      },
    ]
    return  <StandardForm 
      wrappedComponentRef={el => this.instantForm = el}
      formItems={formItems}
    />
  }
  workTimeValidator(rule, value, callback) {
    const type = this.instantForm.getFieldValue('type')[0]
    if(type === 20) {
      return +value < 0
    } else {
      return +value >= 0
    }
  }
  render() {
    return (
      <WingBlank style={{paddingTop: '50px'}} >
        <List className={styles.formList}>
          <List.Item extra={moment().format('YYYY-MM-DD')}>日期：</List.Item>
          {this.renderFrom()}
        </List>
        <Button
          onClick={this.createRecord}
          style={{margin: '15px 0'}}
          type="primary">提交</Button>
      </WingBlank>
    )
  }
}
export default CreateRecord